import React, { PureComponent } from "react";
import { Flex } from "antd-mobile";
import s from "./index.scss";
import { callApi } from "app/utils";
import shibaiPng from "assets/images/shibai.png";
import {hashHistory} from "React-Router"
export default class extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      list: {}
    };
  }

  componentDidMount() {
    callApi("/loan/phase", { loanId: this.props.props.params.id }, "POST").then(
      data => {
        console.log(data);
        this.setState({ list: data.data });
      }
    );
    
  }
  render() {
      let {list} = this.state
    return (
      <div>
        {JSON.stringify(list) !='{}'&&JSON.stringify(list) !=undefined ?(
          <div className={`${s.tabThreeBox}`}>
            <div className={`${s.listBox}`}>
              <Flex className={`${s.item}`}>
                <Flex.Item>还款时间</Flex.Item>
                <Flex.Item>已还本息</Flex.Item>
                <Flex.Item>待还本息</Flex.Item>
              </Flex>
              {list.map((item, index) => {
                return (
                  <Flex key={index} className={`${s.item}`}>
                    <Flex.Item>{item.dueDate}</Flex.Item>
                    <Flex.Item>{item.repaidAmount}</Flex.Item>
                    <Flex.Item>{item.plannedTermAmount}</Flex.Item>
                  </Flex>
                );
              })}
            </div>
          </div>
        ) : (
          <Flex className={`nullBox`} direction="column">
            <Flex.Item className={`nullItem flex8`}>
              <img src={shibaiPng} />
            </Flex.Item>
            <Flex.Item className={`nullItem flex1`}>暂无投资记录</Flex.Item>
            <Flex.Item className={`nullItem flex1`}>
              <div
                className={`btn`}
                onClick={() => {
                  hashHistory.push("/projectList");
                }}
              >
                去投资
              </div>
            </Flex.Item>
          </Flex>
        )}
      </div>
    );
  }
}
